<!--
/**
* Author: txj
* Date: 2023年10月19日11:04:51
* Desc: 卡内容项
*/
-->
<template>
  <view class="card-item" :class="showClass">
    <view class="flex-b">
      <view class="fs34 fc3 b">{{ card.cardName }}</view>
      <view class="fs20 fc8">No.{{ card.cardCode }}</view>
    </view>
    <view class="flex mt30 flex-col-bottom">
      <view class="money" :class="unable ? 'fc6' : 'money-color'">{{ card.balance }}</view>
      <view class="mlr15">元</view>
      <view class="fc8 fs24 ml10" v-if="showDetail" @click.stop="detail">查看明细</view>
    </view>
    <view class="mr10 fs20 fc8 mt40">有效期: {{ card.expireTime }}</view>
    <view v-if="showReason" class="fs20 fc-yellow mt20">不可用原因: {{ card.errTip ? card.errTip : '会员卡余额不足' }}</view>
    <view v-if="card.errPasswordTip" class="bottom" @click="openPassword">
      <view class="flex flex-m">
        <yy-icon name="warning-o" size="20rpx" color="#FFB415"></yy-icon>
        <text class="ml5 fs22 fc6 line-0 fc-yellow">卡密码未更新，无法获得最新余额，点此更新密码</text>
      </view>
    </view>
    <view v-if="showRechargeText" class="bottom">
      <view class="fc-yellow fs20">充值后不支持退款，充值代表您已同意充值不退款规则。</view>
    </view>
    <view v-if="showRecharge && !card.isExpire" class="recharge" @click.stop="recharge">充值</view>
    <view v-if="card.isExpire" class="timeout">已过期</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      card: {
        type: Object,
        default() {
          return {}
        }
      },
      showRecharge: {
        type: Boolean,
        default: false
      },
      showRechargeText: {
        type: Boolean,
        default: false
      },
      selected: {
        type: Boolean,
        default: false
      },
      oneItem: {
        type: Boolean,
        default: false
      },
      showDetail: {
        type: Boolean,
        default: false
      },
      payUse: {
        type: Boolean,
        default: true
      }
    },
    // 计算属性
    computed: {
      showClass() {
        let mainClass = ''
        if (this.card.errPasswordTip || this.showRechargeText) {
          mainClass += 'pb80 '
        }
        if (this.unable) {
          mainClass += 'main-no '
        }
        console.log('this.selected', this.selected)
        if (this.selected) {
          mainClass += 'main-select '
        }
        return mainClass
      },
      unable() {
        return (this.card.unable || !this.card.canUse) && !this.oneItem
      },
      showReason() {
        return this.card.errTip || this.card.noMoney
      }
    },

    // 挂载完成
    mounted() {},

    // 创建完成
    created() {},

    // 挂载方法
    methods: {
      recharge() {
        const query = this.$utils.encode(this.card)
        this.$tools.navigateTo(`/pagesOrder/card/recharge?query=${query}`)
      },
      detail() {
        const query = this.$utils.encode(this.card)
        this.$tools.navigateTo(`/pagesOrder/card/cardDetail?query=${query}`)
      },
      openPassword() {
        const query = this.$utils.encode(this.card)
        this.$tools.navigateTo(`/pagesOrder/card/password?query=${query}`)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .card-item {
    position: relative;
    padding: 30rpx;
    margin: 20rpx 20rpx 0 20rpx;
    background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/card-item-bg.png) no-repeat;
    background-size: 100% 100%;
    .money {
      font-weight: bold;
      line-height: 50rpx;
      font-size: 50rpx;
    }
    .money-color {
      color: #3bc5d2;
    }
    .tip {
      border-radius: 10rpx;
      background: $yellow;
      color: white;
      padding: 4rpx 10rpx;
    }
    .recharge {
      position: absolute;
      right: 30rpx;
      top: 150rpx;
      border-radius: 30rpx;
      background: #58c5ff;
      color: white;
      font-size: 28rpx;
      width: 144rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-weight: bold;
    }
    .timeout {
      position: absolute;
      right: 30rpx;
      top: 190rpx;
      border-radius: 10rpx;
      background: #666666;
      color: white;
      font-size: 22rpx;
      width: 106rpx;
      height: 36rpx;
      line-height: 36rpx;
      text-align: center;
    }
    .bottom {
      position: absolute;
      padding: 10rpx 20rpx;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 0 0 20rpx 20rpx;
      background: #fdf4e3;
      display: flex;
    }
  }
  .main-no {
    background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/card-item-bg-no.png) no-repeat;
    background-size: 100% 100%;
  }
  .main-select {
    background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/card-item-bg-select.png) no-repeat;
    background-size: 100% 100%;
  }
</style>
